<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      a {
        text-decoration: none;
        color: black;
      }
      #head {
        width: 980px;
        padding-top: 20px;
        margin: auto;
      }

      .title {
        background: url(images/buytitle_bg.gif) no-repeat;
        height: 32px;
        line-height: 32px;
        padding-left: 60px;
      }

      #head span {
        padding-left: 50px;
      }

      #content {
        width: 980px;
        box-sizing: 100%;
        overflow: hidden;
        margin: auto;
        margin-top: 20px;
      }

      p1 {
        line-height: 33px;
        padding-left: 60px;
      }

      #content dl {
        float: left;
        padding-right: 50px;
      }

      #total {
        width: 980px;
        margin: auto;
      }

      #total span {
        margin-right: 150px;
      }

      #email {
        margin: auto;
        width: 980px;
        margin-top: 5px;
      }

      .small-input {
        width: 30px;
      }

      table {
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div style="width: 1024px; margin: auto">
      <iframe
        src="head.html"
        frameborder="0"
        width="1024"
        scrolling="no"
      ></iframe>

      <div id="head">
        <img src="images/mycart.gif" alt="" />
        <span>全程运费一律2元</span>
        <span>简易计算器</span>
      </div>
      <div id="content">
        <div class="title">确认商品价格和交易条件</div>

        <dl>
          <dt>商品名</dt>
          <dd>攀高搓捶背靠垫按摩器（蓝色）（定制）</dd>
          <dd>郝彬美国口语-美国口语成功训练系统（MP3)</dd>
          <dd>简.奥斯汀全集（DVD-9)（噌BBC产品目录...</dd>
        </dl>
        <dl>
          <dt>原价</dt>
          <dd>￥258.00</dd>
          <dd>￥480.00</dd>
          <dd>￥258.00</dd>
        </dl>
        <dl>
          <dt>优惠价</dt>
          <dd>￥129</dd>
          <dd>￥129</dd>
          <dd>￥103</dd>
        </dl>
        <dl>
          <dt>打折</dt>
          <dd>50折</dd>
          <dd>60折</dd>
          <dd>70折</dd>
        </dl>

        <dl>
          <dt>数量</dt>
          <dd><input type="text" value="1" /></dd>
          <dd><input type="text" value="1" /></dd>
          <dd><input type="text" value="1" /></dd>
        </dl>
        <dl>
          <dt>删除</dt>
          <dd>删除</dd>
          <dd>删除</dd>
          <dd>删除</dd>
        </dl>
      </div>
      <div id="total">
        <span>继续挑选商品</span>
        <span>￥527</span>
        <span>你共节省:￥239</span>
      </div>
      <div id="email">
        <div class="title">补充您的邮件地址和联系人基本信息</div>
        <table>
          <tr>
            <td align="right">收件人:</td>
            <td><input type="text" /></td>
          </tr>
          <tr>
            <td align="right">地址:</td>
            <td>
              <input type="text" /><a href="address.html">请点击填写地址</a>
            </td>
          </tr>
          <tr>
            <td align="right">电话:</td>
            <td>
              <input type="text" class="small-input" />- <input type="text" />-
              <input type="text" class="small-input" />(区号-电话号码-分机)
            </td>
          </tr>
          <tr>
            <td></td>
            <td align="left"><img src="images/submit.gif" alt="" /></td>
          </tr>
        </table>
        <!-- <ul>
            <li>收件人:<input type="text"></li>
            <li>地址:&nbsp; <input type="text">请点击填写地址</li>
            <li>电话:&nbsp; <input type="text" class="small-input">- <input type="text">- <input type="text"
                    class="small-input">(区号-电话号码-分机) </li>
            <li><img src="images/submit.gif" alt=""></li>

        </ul> -->
      </div>
      <iframe
        src="footer.html"
        frameborder="0"
        width="1024"
        scrolling="no"
      ></iframe>
    </div>
  </body>
</html>
